<!--地图-->
<template>
  <div class="map">
    <h1>- Map</h1>
    <baidu-map
      class="map"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      :map-click="true"
      :inertial-dragging="true"
      @ready="handler"
      @click="sysClik">
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true">
      </bm-geolocation>
    </baidu-map>
    <router-view/>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="景区名字">
        <el-input v-model="formInline.scenicSpotName" placeholder="名字"></el-input>
      </el-form-item>
      <el-form-item label="行政区">
        <el-input v-model="formInline.district" placeholder="行政区"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryScenicSpots">查询</el-button>
      </el-form-item>
    </el-form>

    <!--scenic list -->
    <el-row class="scenic-list" v-if ="items[0].scenicSpotName.length >0">
      <el-col :span="8" v-for="item in items" :key="item.id" :offset="item.index">
        <el-card :body-style="{ padding: '0px' }">
          <div style="padding: 14px;">
            <span >{{ item.scenicSpotName }}</span>
            <p>{{ item.introduction }}</p>
            <div class="bottom clearfix">
              <time class="time">{{ item.createdTime }}</time>
              <!--评论弹出-->
              <el-popover
                ref="popover4"
                placement="right"
                width="600"
                trigger="click">
                <el-table :data="gridData">
                  <el-table-column width="150" property="commentContent" label="评论">
                    <template slot-scope="scope">
                      <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.commentContent }}</el-tag>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="100" property="userId" label="用户">
                    <template slot-scope="scope">
                      <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.userName }}</el-tag>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="300" property="createdTime" label="时间">
                    <template slot-scope="scope">
                      <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.createdTime }}</el-tag>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-button slot="reference" size="mini" type="primary" icon="el-icon-search" class="button" @click="queryComments(item.id)"></el-button>
              </el-popover>
              <el-button type="primary" size="mini" @click="showCommentForm(item.id)" icon="el-icon-upload" class="button"></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="评论" :visible.sync="showFlag" style="width:900px">

      <el-form :model="scenicSpotComment"  ref="scenicSpotComment" label-width="100px" class="demo-ruleForm">
        <el-form-item label="评论内容">
          <el-input v-model="scenicSpotComment.commentContent"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('scenicSpotComment')">提交</el-button>
          <el-button @click="showFlag = false">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>
</template>
<script>
export default {
  data () {
    return {
      cityName: '',
      showFlag: false,
      center: { lng: 0, lat: 0 }, // 经纬度
      zoom: 15, // 地图展示级别
      currentDate: new Date(), // 时间
      formInline: {
        scenicSpotName: '',
        district: ''
      },
      items: [{
        id: '',
        scenicSpotName: '',
        introduction: '',
        address: '',
        street: '',
        createdTime: ''
      }],
      gridData: [{
        id: '',
        commentContent: '',
        userName: '',
        createdTime: ''
      }],
      scenicSpotComment: {
        commentContent: '',
        scenicSpotId: '',
        userId: ''
      }
    }
  },
  methods: {
    showCommentForm (id) {
      this.showFlag = true
      this.scenicSpotComment.scenicSpotId = id
      var userjson = sessionStorage.getItem('user')
      var user = JSON.parse(userjson)
      this.scenicSpotComment.userId = user.id
    },
    submitForm () {
      this.$axios.post('/comments', {
        commentContent: this.scenicSpotComment.commentContent,
        scenicSpotId: this.scenicSpotComment.scenicSpotId,
        userId: this.scenicSpotComment.userId
      }).then(res => {
        alert('success')
        this.showFlag = false
      })
    },
    handler ({ BMap, map }) {
      console.log({ BMap, map })
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
      let _this = this// 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
      var geolocation = new BMap.Geolocation()
      // 定位当前点
      geolocation.getCurrentPosition(function (r) {
        var mk = new BMap.Marker(r.point)
        map.addOverlay(mk)
        map.panTo(r.point)
        _this.center = { lng: r.longitude, lat: r.latitude }
        // 获取位置信息
        var geoc = new BMap.Geocoder()
        geoc.getLocation(r.point, function (rs) {
          var addComp = rs.addressComponents
          _this.formInline.district = addComp.district
          _this.cityName = addComp.city
          // alert(addComp.province + ', ' + addComp.city + ', ' + addComp.district + ', ' + addComp.street + ', ' + addComp.streetNumber)
        })
      }, { enableHighAccuracy: true })
    },
    sysClik (e) {
      var geoc = new BMap.Geocoder()
      geoc.getLocation(e.point, function (rs) {
        var addComp = rs.addressComponents
        alert(addComp.province + ', ' + addComp.city + ', ' + addComp.district + ', ' + addComp.street + ', ' + addComp.streetNumber)
      })
    },
    queryScenicSpots () {
      this.$axios.get('/scenic-spots', {
        params: {
          name: this.formInline.scenicSpotName,
          district: this.formInline.district,
          pageNum: 1,
          pageSize: 6
        }
      }).then(res => {
        this.items = res.data.data.list
      })
    },
    queryComments (scenicSpotId) {
      this.$axios.get(`/scenic-spots/${scenicSpotId}/comments`, {
        params: {
          pageNum: 1,
          pageSize: 5
        }
      }).then(res => {
        this.gridData = res.data.data.list
      })
    }
  }
}
</script>
<style>
  .map {
    width: 100%;
    height: 600px;
  }
  .time {
    font-size: 5px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  .button {
    margin: 10px 0 10px 0;
    padding: 0;
    float: right;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  .scenic-list{
    width: 100%;
    height: 200px;
    margin-top: 20px;
  }
</style>
